<template>
      <div class="pageHeader" style="overflow: hidden" >
      <van-row
        type="flex"
        style="height: 30px; margin-top: 5px; vertical-align: bottom">
        <van-col
          span="4"
          @click="onBack()"
          style="text-align: center; margin-top: 5px">
          <van-icon name="arrow-left" class="headerIcon" />
          <span
            style="
              font-size: 12px;
              vertical-align: middle;
              color: white;
              display: inline-block;">返回</span>
        </van-col>
        <van-col span="15" style="text-align: center; margin-top: 5px">
          <span>{{ title }}</span>
        </van-col>
      </van-row>
    </div>
</template>

<script>
export default {
    name: "HeaderComponent",
  props:{
    title:{
      default:null
    },
    backToHome:{
      type:Function
    }
  },
  methods: {
    onBack(){
      this.backToHome();
    }
  },
}
</script>

<style>
.pageHeader {
  height: 40px;
  background-size: cover;
  background-color: #3793fb;
  color: white;
}
.headerIcon {
  bottom: 0px;
  height: 100%;
  width: 30%;
  font-size: 12px;
  display: inline-block;
}
</style>